<template>
	<view id="register">
		<uni-status-bar bgColor="#FFF"></uni-status-bar>
		<view class="tologin" @tap="toLogin()">
			<u-icon name="arrow-left" color="#000" size="20"></u-icon>
		</view>
		<view class="logo-box"></view>
		<view class="inp-outer">
			<view class="inp-outer-welcome m-b-60">
				<div class="title text-center color-b">欢迎注册</div>
			</view>
			<view class="inp">
				<input class="flex-1" placeholder="请输入昵称" v-model="nickname" />
			</view>
			<view class="inp">
				<view class="font-28" style="text-align: center;border-right: 1px solid #DDD;width: 20%;">+86</view>
				<input type="number" maxlength="11" placeholder="请输入手机号" v-model="mobile" />
			</view>
			<view class="inp">
				<input type="password" class="flex-1" placeholder="请输入登录密码" v-model="password" />
			</view>
			<view class="inp">
				<input type="password" class="flex-1" placeholder="请输入确认密码" v-model="comfirmPassword" />
			</view>
			<view class="inp password">
				<input type="number" maxlength="6" placeholder="请输入验证码" v-model="code" />
				<view class="yzm m-r-6">
					<image class="vercode-image" @click="getCaptchaImageInfo" :src="'data:image/jpg;base64,' + qrcode" ></image>
				</view>
			</view>
			<view class="inp">
				<input type="text" :disabled="urlIn" class="flex-1" placeholder="请输入邀请码" v-model="salt" />
			</view>
			<view class="other remember">
				<checkbox-group>
					<label @tap="read">
						<checkbox style="transform:scale(0.7)" value="cb" :checked="rememberType" color="#FFAC34" />
						<text class="font-26 color-b m-t-5" @click.stop="toNotice()">我已阅读并同意
							<text class="agreement text-decoration">《用户协议》</text>
						</text>
					</label>
				</checkbox-group>
			</view>
			<view class="btn">
				<button @click="onRegister">注册</button>
			</view>
			<view class="btn m-t-20" v-if="salt">
				<button @click="doDownload">去下载App</button>
			</view>
		</view>
	</view>
</template>

<script>
	
	import AgreementAndPrivacyPopup from "./components/AgreementAndPrivacyPopup.vue"
	import {	newSendCode } from '@/common/api/api.js'
	import { getCaptchaImage,register } from '@/common/api/xyc.js'
	import { Debounce } from "@/common/utils/tools.js";
	export default {
		components: {
			AgreementAndPrivacyPopup
		},
		data() {
			return {
				qrcode: '',
				uuid: null,
				nickname: '', //昵称
				mobile: '',
				password: '',
				comfirmPassword:'',
				code: '',
				salt: '',
				rememberType: true,



				show: true,
				count: '',
				password2: '',
				scanBool: false,// 判断是否是邀请注册，如果为false则正常注册要跳登陆
				urlIn: false,//判断是通过邀请码邀请进入
			}
		},
		onLoad(options) {
			if(options.invitationCode) {
				this.urlIn = true
				this.salt = options.invitationCode
			}
			this.getCaptchaImageInfo()
		},
		methods: {
			// 获取验证码
			getCaptchaImageInfo(){
				getCaptchaImage().then(res => {
					if(res.code == 200){
						this.qrcode = res.data.img.replace(/[\r\n]/g, "");
						this.uuid = res.data.uuid
					}
				})
			},
			// 返回
			toPage() {
				uni.redirectTo({
					url: "/pages/login/download"
				})
			},
			read() {
				this.rememberType = !this.rememberType
			},
			downLoadApp() {
				window.location.href = this.http.downloadUrl
			},
			toLogin() {
				uni.redirectTo({
					url: "/pages/login/login"
				})
			},
			toNotice() {
				uni.navigateTo({
					url: "/pages/my/userAgreement"
				})
			},
			doDownload() {
				uni.navigateTo({
					url: "/pages/login/download"
				})
			},
			onRegister:Debounce(function (e) {
				let that = this
				if (!this.nickname) {
					return this.$msg('请输入昵称')
				}
				if (!this.mobile || this.mobile.length != 11) {
					return this.$msg('请输入11位手机号码')
				}
				if (!this.password) {
					return this.$msg('请输入登录密码')
				}
				if (this.password != this.comfirmPassword) {
					return this.$msg('输入密码不一致')
				}
				if (!this.code) {
					return this.$msg('请输入验证码')
				}
				if (!this.rememberType) {
					return this.$msg('请勾选用户协议')
				}
				let data = {
					nickname: this.nickname,
					mobile: this.mobile,
					password: this.password,
					code: this.code,
					salt: this.salt,
					uuid: this.uuid,
				}
				uni.showLoading({
					title: '注册中',
					mask: true
				})
				register(data).then(res => {
					uni.hideLoading()
					if(res.code == 200) {
						this.$msg("注册成功！")
						if(this.urlIn){
							uni.navigateTo({
								url: '/pages/login/download'
							})
						}else{							
							setTimeout(() => {
								that.toLogin()
							}, 1000)
						}
					}else{
						this.$msg(res.msg)
					}
				}).catch(err => {
					uni.hideLoading()
				})
			},500),
			onCode:Debounce(function (e) {
				if (!this.mobile) {
					return this.$msg('请输入手机号码')
				}
				if (this.mobile.length != 11) {
					return this.$msg('请输入11位手机号码')
				}
				newSendCode({
					mobile: this.mobile,
					type: 6,
				}).then(res => {
					if (res.code == 200) {
						this.time()
						this.$msg(res.msg)
					} else {
						this.$msg(res.msg)
					}
				})
			},500),
			time() {
				const TIME_COUNT = 180
				if (!this.timer) {
					this.count = TIME_COUNT
					this.show = false
					this.timer = setInterval(() => {
						if (this.count > 0 && this.count <= TIME_COUNT) {
							this.count--
						} else {
							this.show = true
							clearInterval(this.timer)
							this.timer = null
						}
					}, 1000)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	::v-deep .uni-input-placeholder {
		font-size: 26rpx !important;
	}

	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}

	.vercode-image{
		width: 100%;
		height: 80rpx;
	}

	#register {
		width: 100%;
		background-image: url('/static/xyc/bggg.png');
		background-size: 100% 100%;
		width: 100%;
		min-height: 102vh;

		.tologin {
			font-size: 32rpx;
			color: #FFFFFF;
			position: absolute;
			left: 30rpx;
			top: 68rpx;
		}

		.login {
			display: block;
			width: 60rpx;
			height: 100rpx;
			margin: 20upx 0;
		}

		.logo-box {
			width: 100%;
			height: 220rpx;
			text-align: center;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			margin-top: -20rpx;

			.title {
				display: none;
				font-weight: bold;
				font-size: 60rpx;
				color: #343434;

				.primary {
					color: #E55CC6;
				}
			}

			.desc {
				font-size: 30rpx;
				color: #E55CC6;
			}

			image {
				width: 84rpx;
				height: 84rpx;

			}
		}

		.inp-outer {
			width: 92%;
			box-sizing: border-box;
			margin: 0 auto;
			padding: 20rpx 36rpx;
			.inp-outer-welcome {
				color: #fff;
				text {
					font-size: 24rpx;
				}

				.title {
					font-size: 50rpx;
					font-weight: 800;
				}
			}
		}

		.inp {
			width: 100%;
			margin: 0 auto;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			align-items: center;
			margin-bottom: 20rpx;
			text-indent: 1em;
			border-radius: 10rpx;
			background-color: #F2F2F2;

			input {
				border: none;
				outline: none;
				width: 100%;
				height: 100%;

			}
		}

		.inp:nth-child(3) {
			input {
				width: 60%;
			}
		}

		.inp:nth-child(5) {
			input {
				width: 50%;
			}

			text {
				display: inline-block;
				width: 50%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: grey;
				font-size: 16rpx;
			}
		}

		.inp:nth-child(6) {
			input {
				width: 50%;
			}

			text {
				display: inline-block;
				width: 50%;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				color: grey;
				font-size: 16rpx;
			}
		}

		.password {
			justify-content: space-between;

			.yzm {
				width: 220rpx;
			}
		}

		.other {
			width: 100%;
			margin: 30upx auto 100rpx;
			.xieyi {
				color: #F74A16;
			}
		}

		.btn {
			width: 100%;
			height: 98rpx;
			border-radius: 14rpx;
			box-sizing: border-box;
			button {
				box-sizing: border-box;
				display: block;
				width: 100%;
				height: 100%;
				background: #ECA52B;
				color: #fff;
				font-size: 30upx;
				border: none;
				outline: none;
				margin: 50rpx auto 30upx;
				border-radius: 20rpx;
				line-height: 98rpx;
				&::after {
					border: none;
				}
			}
			.btn1{
				width: 100%;
				text-align: center;
				background: #fff;
				color: #e60000;
				font-size: 30upx;
				margin: 30rpx auto 30upx;
				line-height: 88rpx;
				border: 1px solid #e60000;
				border-radius: 20rpx;
			}
		}

		.download {
			display: flex;
			justify-content: center;
			color: #9A9A9A;
			font-size: 28rpx;

			text {
				border-bottom: 1px solid #9A9A9A;
			}
		}
	}
</style>